<template>
  <div class="node-container">
    <div ref="nodeContainer">
      <div class="flex-wrap" v-for="(i, index) in jdList" :key="i">
        <template v-for="(item, itemIndex) in i" :key="item">
          <div class="node" v-if="item !== 50">
            <div class="flex-center">
              <span class="mark mark-red mark-1eff00"></span>
              <span style="margin-right: 10px">
                {{ $t(item.nodeName || "-") }}</span
              >
              <div class="underline"></div>
            </div>
            <div class="time">{{ item.nodeTime || "-" }}</div>
          </div>
          <div
            v-else
            :class="[
              'curve',
              {
                'curve-border-right':
                  (index + 1) % 2 === 1 && itemIndex != 0 && jdList[index + 1],
                'curve-border-left':
                  (index + 1) % 2 === 0 && itemIndex === 0 && jdList[index + 1],
              },
            ]"
          ></div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";

const props = defineProps({});
const nodeContainer = ref(null);
const list = ref([
  {
    id: 1,
    nodeName: "提交",
    nodeTime: "2025-01-01",
  },
  {
    id: 2,
    nodeName: "做箱",
    nodeTime: "",
  },
  {
    id: 3,
    nodeName: "截单",
    nodeTime: "",
  },
  {
    id: 4,
    nodeName: "申报",
    nodeTime: "",
  },
  {
    id: 5,
    nodeName: "进港",
    nodeTime: "",
  },
  {
    id: 6,
    nodeName: "报关",
    nodeTime: "",
  },
  {
    id: 7,
    nodeName: "放行",
    nodeTime: "",
  },
  {
    id: 8,
    nodeName: "离岗",
    nodeTime: "",
  },
  {
    id: 9,
    nodeName: "派送预报",
    nodeTime: "",
  },
  {
    id: 10,
    nodeName: "清关预报",
    nodeTime: "",
  },
]);
const jdList = ref([]);
onMounted(() => {
  updateNodeLayout();
});
onMounted(() => {
  // 监听窗口大小变化
  const handleResize = () => {
    // 窗口变化时重新计算节点布局
    updateNodeLayout();
  };

  window.addEventListener("resize", handleResize);
});

// 提取更新节点布局的逻辑到单独函数
const updateNodeLayout = () => {
  nextTick(() => {
    const arrList = [];
    const num = Math.floor(nodeContainer.value.clientWidth / 140);
    const number = Math.ceil(list.value.length / num);
    for (let i = 0; i < number; i++) {
      const arr = list.value.slice(
        i * Math.floor(num),
        Math.floor(num) * (i + 1)
      );
      arrList.push(arr);
    }
    jdList.value = arrList.map((it, index) => {
      if ((index + 1) % 2 === 0) {
        return [50, ...it, 50].reverse();
      }
      return [50, ...it, 50];
    });
  });
};
onUnmounted(() => {
  window.removeEventListener("resize");
});
</script>

<style lang="scss" scoped>
.flex-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: end;
  padding: 0;
}
.flex-center {
  display: flex;
  align-items: center;
}
.underline {
  flex: 1;
  height: 1px;
  background: #ccc;
}
.curve {
  position: relative;
  width: 29px;
  height: 56px;
  top: 14px;
  left: -11px;
  box-sizing: content-box;
}
.curve-border-right {
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 0 50px 50px 0;
}
.curve-border-left {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 50px 0 0 50px;
}
.node {
  width: 120px;
  margin: 0 5px;
}
.mark {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  margin-right: 5px;
}
.mark-red {
  background: #ff0000;
}
.mark-1eff00 {
  background: #1eff00;
}
.time {
  padding-left: 17px;
  margin-top: 5px;
}
</style>